<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 181.847 61.455"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="0.03"
          y1="0.89"
          x2="1.09"
          y2="0.387"
          gradientUnits="objectBoundingBox"
        >
          <stop offset="0" :stop-color="states.color" />
          <stop offset="0.524" :stop-color="states.color" stop-opacity="0.2" />
          <stop
            offset="0.726"
            :stop-color="states.color"
            stop-opacity="0.102"
          />
          <stop offset="1" :stop-color="states.color" stop-opacity="0" />
        </linearGradient>
      </defs>
      <g id="文字边框5" transform="translate(0.001)">
        <path
          id="路径_960"
          data-name="路径 960"
          d="M556.847-405.873V-459H440.169l-5.289,5.043H384.6l-9.6,8.751v47.347H547.421Z"
          transform="translate(-375.001 459.314)"
          :fill="states.color"
          opacity="0.2"
        />
        <path
          id="路径_961"
          data-name="路径 961"
          d="M381.421-443.225,375-436.963v-6.191Z"
          transform="translate(-375.001 448.196)"
          :fill="states.color"
        />
        <path
          id="路径_962"
          data-name="路径 962"
          d="M931.627-278.383l6.421-6.262v6.191Z"
          transform="translate(-756.202 339.594)"
          :fill="states.color"
        />
        <path
          id="路径_963"
          data-name="路径 963"
          d="M548.358-454.848H543L546.152-458h5.358Z"
          transform="translate(-543.001 458.314)"
          :fill="states.color"
        />
        <path
          id="路径_964"
          data-name="路径 964"
          d="M519.024-454.848h-5.357L516.818-458h5.357Z"
          transform="translate(-504.423 458.314)"
          :fill="states.color"
        />
        <path
          id="路径_965"
          data-name="路径 965"
          d="M489.691-454.848h-5.358L487.485-458h5.358Z"
          transform="translate(-465.845 458.314)"
          :fill="states.color"
        />
        <path
          id="路径_966"
          data-name="路径 966"
          d="M453.812-454.848H425L428.152-458h28.812Z"
          transform="translate(-397.267 458.314)"
          fill="url(#linear-gradient)"
        />
        <path
          id="路径_969"
          data-name="路径 969"
          d="M547.053-398.859l8.793-7.476V-458H440.57l-5.289,5.043H384.992L376-444.765v45.905H547.053m.368,1H375v-47.347l9.6-8.751H434.88L440.169-459H556.847v53.127Z"
          transform="translate(-375.001 459)"
          :fill="states.color"
        />
        <path
          id="路径_1115"
          data-name="路径 1115"
          d="M-1465,110.031V99h1.891v9.14h9.881v1.891Z"
          transform="translate(1464.999 -48.89)"
          :fill="states.color"
        />
        <path
          id="路径_1114"
          data-name="路径 1114"
          d="M-1453.228,99v11.031h-1.891v-9.14H-1465V99Z"
          transform="translate(1635.073 -99)"
          :fill="states.color"
        />
      </g>
      <text
        :x="states.x"
        :y="states.y"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
  id: {
    type: String,
    default: "",
  },
});

const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;
let emit = defineEmits(["updateSize"]);
onMounted(() => {
  // states.value.color = "#031d43";
  states.value.fontColor = "#fff";
  states.value.y = "60%";
  states.value.x = "50%";
  emit("updateSize", {
    w: 391,
    h: 140,
    id: props.id,
  });
});
</script>

<style scoped lang="scss"></style>
